<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">

  <!-- CoCreate UI -->
  
  
  <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>

  <!-- Jquery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" crossorigin="anonymous" />    
  
  <!-- Datatables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css"/>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>

</head>
<body>
    <!-- Navbar -->
    <!--<div id="modal-viewport" class="hidden"></div>-->
    <div data-main_content_id="content" class="nav width:100% display:flex align-items:center background:whitesmoke" data-scroll_effect="hide-nav" data-scroll_position="50">

      <!-- Menu Icon Animations -->
      <!--<a class="nav-toggle menu_icon--Vdots" data-toggle_sidenav="menuL">-->
      <!--  <div class="circle"></div>-->
      <!--  <div class="circle"></div>-->
      <!--  <div class="circle"></div>-->
      <!--  <div class="circle"></div>-->
      <!--  <div class="circle"></div>-->
      <!--</a>-->
        
        <ul class="overflow:overlay display:inline-flex direction:rtl font-size:20px align-items:center list-style-type:none">

    			
    			<!-- Window Controls -->
    			<li class="margin-right:15px"><a class="btn-modal-close"><i class="fas fa-times">
    			  </i></a></li>
    			<li class="margin-right:15px"><a class="btn-modal-maximize"><i data-transform_to="far fa-window-restore" class="far fa-window-maximize">
    			  </i></a></li>
    			<li class="margin-right:15px"><a class="btn-modal-minimize"><i class="far fa-window-minimize">
    			  </i></a></li>
    			
    			<!-- fullscreen toogle and icon transform-->
    			<li class="margin-right:15px"><a data-fullscreen><i data-transform_to="fas fa-compress" class="fas fa-expand">
    			  </i></a></li>
    			
    			<!-- Render Builder -->
    			<li class="margin-right:15px">
			    <a data-modal_url="render.html"
	              	 data-pass_collection="modules"
	              	 data-pass_document_id="" 
	              	 data-pass_prefix="" 
	              	 data-pass_to="builder" 
	              	 data-pass_id="render"
	                 data-modal_width="100%">
              		<i class="fas fa-palette"></i>
            		 <div data-pass_collection="modules"
  						   data-pass_document_id=""
  					       data-pass_prefix=""
  						   data-pass_to="render"
  						   class="sessionBuilderUI_Id">
					 </div>
               </a>
          </li>
          
          <!-- Render item Form -->
    			<li class="margin-right:15px">
					<a data-modal_url="render.html" 
					   data-pass_collection="module_activity"
					   data-pass_document_id=""
					   data-pass_prefix="form_"
					   data-pass_to="form-fields"
					   data-pass_id="render"
					   data-modal_ajax="false" 
					   data-modal_width="320px" 
					   data-modal_height="100%" 
					   data-modal_color="#229954" 
					   data-modal_x="" 
					   data-modal_y="">
					  <i class="fas fa-plus"></i>
					  <div data-pass_collection="modules"
						   data-pass_document_id=""
					       data-pass_prefix="form_"
						   data-pass_to="render"
						   data-pass_id="render">
					  </div>
					</a>
		        </li>
    			
    			<!-- Datatable Controls -->  
    			<li class="margin-right:15px">
    			  <a data-btn_type="column-visibility" data-table_id="example1" class="btn-table"><i class="far fa-eye"></i></a>
          </li>
    			<li class="margin-right:15px"><a data-btn_type="pdf" data-table_id="example1" class="btn-table"><i class="far fa-file-pdf">
    			  </i></a></li>
    			<li class="margin-right:15px"><a data-btn_type="excel" data-table_id="example1" class="btn-table"><i class="far fa-file-excel">
    			  </i></a></li>
    			<li class="margin-right:15px"><a data-btn_type="csv" data-table_id="example1" class="btn-table"><i class="fas fa-file-csv">
    			  </i></a></li>
    			<li class="margin-right:15px"><a data-btn_type="column-visibility" data-table_id="example1" class="btn-table"><i class="fas fa-file-pdf">
    			  </i></a></li>
    			<li class="margin-right:15px"><a data-btn_type="copy" data-table_id="example1" class="btn-table"><i class="far fa-copy">
    			  </i></a></li>
    			<li class="margin-right:15px"><a data-btn_type="print" data-table_id="example1" class="btn-table"><i class="fas fa-print">
    			  </i></a></li>
				 </ul>
      </div>
      
      <!-- Main Content with Viewport/Boundaries for windows -->  
      <!--<div data-table_id="example1" data-filter_name="menu-position" data-filter_value="0" data-filter_operator="gt" data-value_type="number"></div>-->
		  <div id="modal-viewport" data-main_content_id="content">
  			  <div class="btn-group">
    				<ul data-table_id="example1" class="colvis-menu cocreate-dt-menu"></ul>
			    </div>
			    
			    <!-- Datatable Fetch using data-attributes -->  
			    <table id="example1" width="100%" 
			      data-fetch_collection="module_activity" 
			      data-table_id="example1"
			      data-fetch_name="module_id"
			      data-fetch_value="5e6d79f9d8cdbe53927a0443"
			      data-order_by=""
			      data-order_type=""
			      class="table row-border hover dt-option">
    				<thead>
    				  <tr>
      					<th>
      					  <input type="text" class="floating-label"
				         	  data-filter_name="name" 
				         	  data-value_type="string"
				         	  data-filter_operator=""
                 			  data-table_id="example1" 
				         	  placeholder="Stage Name" class="width:100%"></th>
      					<th>
							<input type="text" class="floating-label"
				         	  data-filter_name="_id" 
				         	  data-value_type="string"
				         	  data-filter_operator=""
                 			  data-table_id="example1" 
				         	  placeholder="Document id" class="width:100%">
				         </th>
    				  </tr>
    			 	</thead>
				    <tbody>
  				  
  				  <!-- Datatable Template -->  
  				  <tr class="template">
    					<td class="option">
      					  <div>
        						<a target="modal" href="stage-form.html" 
        						   data-pass_collection="module_activity"
        						   data-pass_document_id=""
        						   data-pass_to="form-fields" 
        						   data-modal_width="500px" 
        						   data-modal_height="100%" 
        						   data-modal_color="#229954" 
        						   data-modal_header="false"
        						   data-modal_x="" 
        						   data-modal_y="">
        						  <h4 name="name">Stage Name</h4>
        						  <!--<div data-pass_collection="modules"-->
            				<!--		   data-pass_document_id=""-->
        						  <!--     data-pass_prefix="form_"-->
            				<!--		   data-pass_to="render"-->
            				<!--		    data-pass_id="render">-->
        						  <!--</div>-->
        						</a>
        						  <h5 name="description"></h5>
      					  </div>
    					</td>
    					<td>
    					  <!--<a target="modal" href="stage-form.html"-->
    					    
    					  <!--   data-pass_prefix="form_"-->
    					  <!--   data-pass_collection="modules"-->
    					  <!--   data-pass_to="form-fields"-->
    					  <!--   data-modal_ajax="false"-->
    					  <!--   data-modal_width="320px"-->
    					  <!--   data-modal_height="100%"-->
    					  <!--   data-modal_color="#229954"-->
    					  <!--   data-modal_header="false"-->
    					  <!--   data-modal_x=""-->
    					  <!--   data-modal_y="">-->
    					     <b name="_id">Document Id</b>
    						<!--    <div data-pass_collection="modules"-->
        		<!--				   data-pass_document_id=""-->
    						<!--       data-pass_prefix="form_"-->
        		<!--				   data-pass_to="render"-->
        		<!--				  data-pass_id="render">-->
      				<!--		  </div>-->
    						<!--</a>-->
    					</td>
  				  </tr>
  				</tbody>
  				<tfoot>
  				  <tr>
    					<th>Name</th>
    					<th>Id</th>
  				  </tr>
  				</tfoot>
			  </table>

				</div>
        <form data-collection="modules" data-realtime="true">
        	 <input type="text" data-realtime="true" data-pass_value_to="module_id" data-collection="modules" data-document_id="5deb1819189f212c8ebd0139" name="_id" data-pass_id="render">

		  <div class="passValueBtn">
		  <a href="stage-form.html"
			 target="modal"
		     data-pass_document_id=""
		     data-pass_collection="module_activity"
		     data-pass_to="form-fields"
		     data-modal_width="320px"
		     data-modal_height="100%"
		     data-modal_color="#229954"
		     data-modal_header="false"
		     data-modal_x=""
		     data-modal_y=""
		     class="position:fixed bottom:15px right:15px background:dodgerblue grow-hover round">
		    <i class="fas fa-plus"></i>
			    <div data-pass_collection="modules"
				   data-pass_document_id="5e6d79f9d8cdbe53927a0443"
		    	   data-pass_prefix="form_"
				   data-pass_to="render"
				   data-pass_id="render">
				</div>
			</a>
			</div>
			</form>
  
  <script>
    var config = {
      apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
            organization_Id: '5de0387b12e200ea63204d6c'
    }
  </script>

  <!--CoCreateJS-->
  <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
  <!--  <script src="https://server.cocreate.app/js/socket.io.js"></script>-->
  <!--<script src="https://server.cocreate.app/js/CoCreate-logic.js"></script>-->
  <!--<script src="https://server.cocreate.app/js/CoCreate-link.js"></script>-->
  
  <!--<script src="https://server.cocreate.app/js/CoCreate-utils.js"></script>-->

  <!--<script src="https://server.cocreate.app/js/CoCreate.js"></script>-->
  <!--<script src="https://server.cocreate.app/js/CoCreate-document_id.js"></script>-->
  
  <!--<script src="https://server.cocreate.app/js/CoCreate-filter.js"></script> -->
  <!--<script src="https://server.cocreate.app/js/CoCreate-templating.js"></script>-->
  <!--<script src="https://server.cocreate.app/js/CoCreate-sort.js"></script>-->
  
  
  
  <script src="https://server.cocreate.app/js/CoCreate-select.js"></script>
  
  <script src="https://server.cocreate.app/js/CoCreate-floating-label.js"></script>

  <!--CoCreate Plugins-->
  <script src="https://server.cocreate.app/CoCreate-plugins/CoCreate-modal/src/CoCreate-modal.js"></script>
  <script src="https://server.cocreate.app/js/CoCreate-datatables.js"></script>

</body>
</html>